<template>
  <div class="page-login">
    <header class="header">
      <a 
        class="site-logo" 
        href="/"
      >美团网</a>
    </header>
    <div class="main">
      <div class="left">
        <img 
          src="//s0.meituan.net/bs/file/?f=fe-sso-fs:build/page/static/banner/www.jpg" 
          width="480" 
          height="370" 
          alt="美团网"
        >
      </div>
      <div class="right">
        <h4
          v-if="error"
          class="tips"><i/>{{ error }}</h4>
        <p><span>账号登录</span></p>
        <el-input
          v-model="username"
          prefix-icon="profile"/>
        <el-input
          v-model="password"
          prefix-icon="password"
          type="password"/>
        <div class="foot">
          <el-checkbox v-model="checked">7天内自动登录</el-checkbox>
          <a href="#">忘记密码？</a>
        </div>
        <el-button
          class="btn-login"
          type="success"
          size="mini"
          @click="login">登录</el-button>
      </div>
    </div>
    <footer>
      <div class="site-info-nav">
        <ul class="left">
          <li 
            v-for="(item, index) of navInfo"
            :key="index"
          >
            <a :href="item._src">{{ item.title }}</a>
          </li>
        </ul>

        <a href="/commitment">
          <img 
            width="276" 
            height="24" 
            src="//s0.meituan.net/www/img/footer-commitment.png" 
            alt="美团保障">
        </a>
      </div>

      <div class="copyright">
        <p>
          ©<span>2018</span>
          <a href="http://meituan.com/">美团网团购</a>
          meituan.com
          <a 
            href="http://www.miibeian.gov.cn/" 
            target="_blank">京ICP证070791号</a>
          京公网安备11010502025545号<a 
            href="http://meituan.com/about/rules" 
            target="_blank"> 电子公告服务规则</a>
        </p>
      </div>
    </footer>
  </div>
</template>

<script>
import CryptoJS from 'crypto-js'
import { setTimeout } from 'timers';

export default {
  layout: 'blank',
  data() {
    return {
      error: false,
      username: '',
      password: '',
      checked: '',
      navInfo: [
        {
          title: '关于美团',
          _src: '/about'
        },
        {
          title: '美团承诺',
          _src: '/promise'
        },
        {
          title: '加入我们',
          _src: '/joinus'
        },
        {
          title: '商家入驻',
          _src: '/merchantentey'
        },
        {
          title: '帮助中心',
          _src: '/help'
        },
        {
          title: '美团手机版',
          _src: '/app'
        },
      ]
    }
  },
  methods: {
    login() {
      this.$axios.post('/users/signin', {
        username: window.encodeURIComponent(this.username),
        password: CryptoJS.MD5(this.password).toString()
      })
        .then(({status, data}) => {
          if (status === 200) {
            if (data && data.code === 0) {
              location.href = '/'
            } else {
              this.error = data.msg
            }
          } else {
            this.error = `服务器出错，错误码${status}`
          }

          setTimeout(() => {
            this.error = ''
          }, 3000)
        })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .header
    position relative
    width 980px
    height 54px
    margin 40px auto 30px
    .site-logo
      overflow hidden
      margin 0
      width 82px
      height 54px
      background-position -188px -808px
      background-image url(//s0.meituan.net/bs/file/?f=fe-sso-fs:build/assets/sp-normal.2ee5c09.png)
      float left
      display inline
      text-indent -9999px
  .main
    margin 0 auto 70px
    width 980px
    &:after
      content ''
      display block
      height 0
      visibility hidden
      clear both
    .left
      float left 
      width 480px
      height 370px
      margin 0 115px 0 0
    .right
      display flex
      flex-direction column
      float right
      width 270px
      .tips
        margin-bottom 10px
        padding 10px
        padding-left 26px
        border 1px solid #f5d8a7
        border-radius 2px
        background #fff6db
        font-size 12px
        i
          position relative
          &::after
            position absolute 
            top -9px 
            left -24px
            content '\e64d'
            display inline-block
            width 17px
            height 17px
            font-family iconfont 
            font-style normal 
            font-size 28px
      em
        float right
        font-style normal 
      .el-input
        margin-top 10px
      .el-input__icon
        &.profile
          &::after
            position absolute 
            font-family iconfont 
            content '\e627'
            font-style normal 
            top -1px
            left 5px
        &.password
          &::after
            position absolute 
            font-family iconfont 
            content '\e600'
            font-style normal 
            font-size 18px
            top -1px 
            left 3px
      .btn-login
        margin-top 10px
        padding 12px 15px
        background-color #2db3a6
        border none 
        color #fff
      .foot
        display flex
        justify-content space-between
        line-height 32px
        font-size 12px
        a
          color #31bbac
  footer
    margin 0 auto 30px
    width 980px
    font-size 12px
    color #999999
    a
      color #999999
      &:hover
        color #31bbac
    .site-info-nav
      display flex
      justify-content space-between
      align-items center 
      margin-bottom 20px
      padding 12px 0
      border-top 1px solid #eee
      border-bottom 1px solid #eee
      .left
        width 594px
        li
          display inline-block
          margin 5px 0
          padding 0 16px
          border-right 1px solid #eee
    .copyright
      font-size 12px
</style>
